<template>
    <el-dialog
        class="dialog"
        :title="title"
        :visible.sync="isShow"
        :close-on-click-modal="false"
        @close="onDialogCloseBefore"
    >
        <el-form
            ref="form"
            label-width="auto"
            class="form"
            :model="formData"
            :rules="rules"
        >
            <el-form-item label="上级菜单:" prop="menu_psn_show">
                <uxInputTree
                    v-model="formData.menu_psn_show"
                    :selectParams="selectParams"
                    :treeParams="treeParams"
                    :treeData="treeData"
                />
            </el-form-item>
            <el-form-item label="菜单名称:" prop="menu_name">
                <el-input
                    v-model="formData.menu_name"
                    clearable
                    maxlength="10"
                    placeholder="请输入菜单名称"
                ></el-input>
            </el-form-item>
            <el-form-item label="菜单类型" prop="menu_type">
                <el-select
                    v-model="formData.menu_type"
                    placeholder="请选择菜单类型"
                >
                    <el-option
                        v-for="item in menuTypeData"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="作用范围" prop="menu_scope">
                <el-select
                    v-model="formData.menu_scope"
                    placeholder="请选择菜单作用范围"
                >
                    <el-option
                        v-for="item in menuScopeData"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="前端配置:" prop="menu_path">
                <el-input
                    v-model="formData.menu_path"
                    placeholder="请输入前端配置"
                ></el-input>
            </el-form-item>
            <el-form-item label="后端配置:" prop="menu_backend_path">
                <el-input
                    v-model="formData.menu_backend_path"
                    placeholder="请输入后端配置"
                ></el-input>
            </el-form-item>
            <el-form-item label="菜单状态" prop="status">
                <el-select
                    v-model="formData.status"
                    placeholder="请选择菜单状态"
                >
                    <el-option
                        v-for="item in statusData"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="排序:" prop="sort">
                <el-input
                    v-model="formData.sort"
                    placeholder="请输入排序值,越大越靠前"
                ></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer">
            <el-button @click="onDialogClose">取 消</el-button>
            <el-button class="btn-confirm" @click="onSubmit">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import { Getter, Action, State } from "vuex-class";
import { mixinDialogForm } from "@/mixin/dialog/Form";
import uxInputTree from "@/components/input/tree";
@Component({
    name: "systemAccessEdit",
    mixins: [mixinDialogForm],
    components: { uxInputTree }
})
export default class systemAccessEdit extends Vue {
    @Action("systemAccess/add") itemAdd: any;
    @Action("systemAccess/edit") itemEdit: any;
    @Getter("systemAccess/bigTree") treeData: any;

    @State((state) => state.sharing.menuType) menuTypeData: any;
    @State((state) => state.sharing.menuScope) menuScopeData: any;
    statusData: any = [
        { value: "1", label: "启用" },
        { value: "2", label: "禁用" }
    ];
    editInit(data: any) {
        const me = this as any;
        data.menu_type = data.menu_type.toString();
        data.menu_scope = data.menu_scope.toString();
        data.status = data.status.toString();
        data.sort = data.sort.toString();
        data.menu_psn_show = data.menu_psn || "-1";
        me.formData = Object.assign({}, me.formData, data);
    }
    selectItem!: any;
    addInit() {
        if (this.selectItem) {
            this.formData.menu_psn_show = this.selectItem.menu_sn;
        }
    }
    selectParams: object = {
        clearable: true,
        placeholder: "请选择上级菜单"
    };

    formData: any = {
        menu_psn_show: "",
        menu_psn: "",
        menu_name: "",
        menu_type: "",
        menu_path: "",
        menu_backend_path: "",
        menu_scope: "",
        status: "1",
        sort: "0"
    };

    @Watch("formData.menu_psn_show", { immediate: true })
    updateMenuPsn(v: any = {}) {
        if (v == "-1") {
            v = "";
        }
        this.formData.menu_psn = v;
    }
    // 表单验证
    rules: any = {
        menu_psn_show: [
            {
                required: true,
                message: "请选择上级菜单"
            }
        ],
        menu_name: [
            {
                required: true,
                message: "请输入菜单名称"
            }
        ],
        menu_type: [
            {
                required: true,
                message: "请选择菜单类型"
            }
        ],
        menu_scope: [
            {
                required: true,
                message: "请选择作用范围"
            }
        ],
        status: [
            {
                required: true,
                message: "请选择菜单状态"
            }
        ]
    };
    // 标题
    get title() {
        return (this as any).isEdit ? "编辑菜单" : "新增菜单";
    }

    treeParams: any = {
        clickParent: true,
        props: {
            children: "children",
            label: "menu_name",
            value: "menu_sn"
        }
    };

    onDialogCloseBefore() {
        const me = this as any;
        me.selectItem = null;
        me.onDialogClose()
    }
}
</script>